<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background: red;
            position: absolute;
        }

        .box p {
            color: #fff;
        }

        .bool {
            display: inline-block;
        }
        .box button {
            border: 0;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <p class="bool">false</p> <a href="#" class="hui">点击回放</a>
        <p class="x1">x:0</p>
        <p class="y2">y:0</p>
    </div>
</body>
</html>
<script>
    //获取节点
        var box = document.querySelector(".box");
        var hui = document.querySelector(".hui");
        var x1 = document.querySelector(".x1");
        var y2 = document.querySelector(".y2");
        var str = [];
        //事件
        box.onmousedown = function (e) {
            var xx = e.offsetX;
            var yy = e.offsetY;
            window.onmousemove = function (e) {
                // var a = setInterval(function (e) {
                var x = e.clientX - xx;
                var y = e.clientY - yy;
                box.style.left = x + 'px';
                box.style.top = y + 'px';
                x1.innerHTML = "x:" + box.offsetTop + "px"
                y2.innerHTML = "y:" + box.offsetLeft + "px"
                    
                str.push({
                    left: box.offsetLeft,
                    top: box.offsetTop
                })
            }
        }
        window.onmouseup = function () {
            window.onmousemove = null;
        };
        //阻止浏览器默认行为
        hui.onmousedown = function (ee) {
            ee.stopPropagation()
        }
        //定时回放
        hui.addEventListener("click", (e) => {
            e.returnValue = false;
            console.log(str.length)
            var index = str.length - 1
            var i = 0;
            var t1 = setInterval(() => {
                if (index < i) {
                    clearInterval(t1);
                    return
                }
                box.style.left = str[i++].left + "px"
                box.style.top = str[i++].top + "px"
            }, 50)
        })
</script>